import 'package:flutter/material.dart';
import './tabs/circle.dart';
import './tabs/community.dart';
import './tabs/share.dart';
import './tabs/mate.dart';
import './tabs/my.dart';

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [
    CirclePage(),
    CommunityPage(),
    SharePage(),
    MatePage(),
    MyPage()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // extendBody: true, // 不设置会造成圆角处没有透明效果
      body: _pages[_currentIndex], // 根据索引号加载相应页面
      bottomNavigationBar: Container(
        margin: const EdgeInsets.fromLTRB(20, 0, 20, 20),
        decoration: BoxDecoration(
            color: const Color(0xFFC69680), // 背景颜色
            borderRadius: BorderRadius.circular(20)),
        child: BottomNavigationBar(
          showSelectedLabels: false, // 不展示选中标签文字
          showUnselectedLabels: false, // 不展示为选中标签文字
          type: BottomNavigationBarType.fixed, // 底部导航栏超过4个必须配置
          // fixedColor: Colors.black, // 选中颜色
          // unselectedItemColor: Colors.white, // 未选中颜色
          currentIndex: _currentIndex, // 菜单索引号
          backgroundColor: Colors.transparent, // 设置透明背景
          elevation: 0.0, // 去除阴影
          iconSize: 40,
          items: [
            BottomNavigationBarItem(
                icon: Text(
                  "搭圈",
                  style: TextStyle(
                    color: _currentIndex == 0 ? Colors.black : Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                label: "搭圈"),
            BottomNavigationBarItem(
                icon: Text(
                  "社区",
                  style: TextStyle(
                    color: _currentIndex == 1 ? Colors.black : Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                label: "社区"),
            BottomNavigationBarItem(
                icon: Text(
                  "分享",
                  style: TextStyle(
                    color: _currentIndex == 2 ? Colors.black : Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                label: "分享"),
            BottomNavigationBarItem(
                icon: Text(
                  "搭子",
                  style: TextStyle(
                    color: _currentIndex == 3 ? Colors.black : Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                label: "搭子"),
            BottomNavigationBarItem(
                icon: Text(
                  "个人",
                  style: TextStyle(
                    color: _currentIndex == 4 ? Colors.black : Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                label: "个人"),
          ],
          // 点击菜单触发的方法
          onTap: (index) {
            setState(() {
              _currentIndex = index; // 更新菜单的索引号
            });
          },
        ),
      ),
    );
  }
}
